<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品搜索 - 优品</title>
    <link rel="icon" href="/static/search/image/favicon.ico">
    <link rel="stylesheet" href="/static/search/css/index.css">
    <link rel="stylesheet" type="text/css" href="/static/search/font/iconfont.css">
    <script src="/static/search/js/jquery-1.12.4.js"></script>
    <style>
        .a_page{
            cursor: pointer;
        }
        .nav_f_v, .nav_f_x{
            color: red;
        }
        .nav_f_x{
            display: inline-block;
            text-align: center;
            width: 30px;
        }
    </style>
</head>

<body>
    <!--头部-->
    <div class="header_head">
        <div class="header_head_box">
            <b class="header_head_p">
                <div style="overflow: hidden">
                    <a href="http://yomall.com" class="header_head_p_a1" style="width:73px;">优品首页</a>
                    <a href="#" class="header_head_p_a">
                        <img src="/static/search/img/img_05.png" style="border-radius: 50%;" />北京
                    </a>
                </div>
                <div class="header_head_p_cs">
                    <a href="#" style="background: #C81623;color: #fff;">北京</a>
                    <a href="#">上海</a>
                    <a href="#">天津</a>
                    <a href="#">重庆</a>
                    <a href="#">河北</a>
                    <a href="#">山西</a>
                    <a href="#">河南</a>
                    <a href="#">辽宁</a>
                    <a href="#">吉林</a>
                    <a href="#">黑龙江</a>
                    <a href="#">内蒙古</a>
                    <a href="#">江苏</a>
                    <a href="#">山东</a>
                    <a href="#">安徽</a>
                    <a href="#">浙江</a>
                    <a href="#">福建</a>
                    <a href="#">湖北</a>
                    <a href="#">湖南</a>
                    <a href="#">广东</a>
                    <a href="#">广西</a>
                    <a href="#">江西</a>
                    <a href="#">四川</a>
                    <a href="#">海南</a>
                    <a href="#">贵州</a>
                    <a href="#">云南</a>
                    <a href="#">西藏</a>
                    <a href="#">陕西</a>
                    <a href="#">甘肃</a>
                    <a href="#">青海</a>
                    <a href="#">宁夏</a>
                    <a href="#">新疆</a>
                    <a href="#">港澳</a>
                    <a href="#">台湾</a>
                    <a href="#">钓鱼岛</a>
                    <a href="#">海外</a>
                </div>
            </b>
            <ul>
                <li>
                    <a th:if="${session.loginUser==null}" href="http://auth.yomall.com/login.html">你好，请登录</a>
                    <a th:if="${session.loginUser!=null}">欢迎，[[${session.loginUser.nickname}]]</a>
                </li>
                <li>
                    <a th:if="${session.loginUser==null}" href="http://auth.yomall.com/reg.html" class="li_2">免费注册</a>
                </li>
                <span>|</span>
                <li>
                    <a href="#">我的订单</a>
                </li>
                <span>|</span>
                <li class="header_wdjd">
                    <a href="#">我的优品</a>
                    <img src="/static/search/image/down-@1x.png" />
                </li>
                <span>|</span>
                <li>
                    <a href="#">优品会员</a>
                </li>
                <span>|</span>
                <li>
                    <a href="#">企业采购</a>
                </li>
                <span>|</span>
                <li class="header_wdjd1">
                    <a href="#">客户服务</a>
                    <img src="/static/search/image/down-@1x.png" />
                </li>
                <span>|</span>
                <li class="header_wzdh">
                    <a href="#">网站导航</a>
                    <img src="/static/search/image/down-@1x.png" />
                </li>
                <span>|</span>
                <li class="header_sjjd">
                    <a href="#">手机优品</a>
                    <div class="header_sjjd_div">
                        <img src="/static/search/img/01.png" />
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <!--搜索导航-->
    <div class="header_sous">
        <div class="logo">
            <a href="http://yomall.com">
                <img src="/static/search/image/logo.png" alt="">
            </a>
        </div>
        <div class="header_form">
            <input id="keyword_input" type="text" placeholder="手机" th:value="${param.keyword}" />
            <a href="javascript:searchByKeyword()">搜索</a>
        </div>
        <div class="header_ico">
            <div class="header_gw">
                <span><a href="#">我的购物车</a></span>
                <img src="/static/search/image/settleup-@1x.png" />
                <span>0</span>
            </div>
            <div class="header_ko">
                <p>购物车中还没有商品，赶紧选购吧！</p>
            </div>
        </div>
        <div class="header_form_nav">
            <ul>
                <li>
                    <a href="#">华为手机</a>
                </li>
                <li>
                    <a href="#">苹果手机</a>
                </li>
                <li>
                    <a href="#">小米手机</a>
                </li>
                <li>
                    <a href="#">手机自营</a>
                </li>
                <li>
                    <a href="#">vivo手机</a>
                </li>
                <li>
                    <a href="#">华为mate40</a>
                </li>
                <li>
                    <a href="#">华为p40</a>
                </li>
                <li>
                    <a href="#">小米11</a>
                </li>
                <li>
                    <a href="#">手机5G</a>
                </li>
            </ul>
        </div>
        <nav>
            <ul>
                <li class="nav_li1">
                    <a href="#">全部商品分类</a>
                </li>
                <li class="nav_li">
                    <a href="#">优品时尚</a>
                </li>
                <li class="nav_li">
                    <a href="#">美妆馆</a>
                </li>
                <li class="nav_li">
                    <a href="#">超市</a>
                </li>
                <li class="nav_li">
                    <a href="#">生鲜</a>
                </li>
            </ul>
            <div class="spacer">|</div>
            <ul>
                <li class="nav_li">
                    <a href="#">全球购</a>
                </li>
                <li class="nav_li">
                    <a href="#">闪购</a>
                </li>
                <li class="nav_li">
                    <a href="#">拍卖</a>
                </li>
            </ul>
            <div class="spacer">|</div>
            <ul>
                <li class="nav_li">
                    <a href="#">金融</a>
                </li>
            </ul>

        </nav>
        <div class="header_main_left">
            <ul>
                <li>
                    <a href="#" class="header_main_left_a"><b>家用电器</b></a>
                </li>
            </ul>
        </div>
    </div>

    <hr style="border: 1px solid red;margin-top: -7px;">

    <!--热卖促销-->
    <div class="JD_temai">
        <div class="JD_main">
            <div class="JD_left">
                <div class="hd">热卖推荐</div>
                <div class="bd mc">
                    <ul class="mc">
                        <li>
                            <a href="#" class="mc_a"><img src="/static/search/img/5a28b5a1n8a5c095f.jpg" alt=""></a>
                            <div class="mc_div">
                                <a href="#" class="mc_div_a1">
                                    <em>华为 HUAWEI nova 2S 全面屏四摄 6GB +64GB 曜石黑 移动联通电信4G手机 双卡双待</em>
                                </a>
                                <p>
                                    <strong>
                                        <em class="number J-p-5963064">￥2999.00</em>
                                    </strong>
                                </p>
                                <a href="#" class="mc_div_a2">立即抢购</a>
                            </div>
                        </li>
                        <li>
                            <a href="#" class="mc_a"><img src="/static/search/img/59f5eef1n99542494.jpg" alt=""></a>
                            <div class="mc_div">
                                <a href="#" class="mc_div_a1">
                                    <em>【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待</em>
                                </a>
                                <p>
                                    <strong>
                                        <em class="number J-p-5963064">￥1699.00</em>
                                    </strong>
                                </p>
                                <a href="#" class="mc_div_a2">立即抢购</a>
                            </div>
                        </li>
                        <li style="margin-right: 0">
                            <a href="#" class="mc_a"><img src="/static/search/img/59f5eef1n99542494.jpg" alt=""></a>
                            <div class="mc_div">
                                <a href="#" class="mc_div_a1">
                                    <em>华为 HUAWEI nova 2S 全面屏四摄 6GB +64GB 曜石黑 移动联通电信4G手机 双卡双待</em>
                                </a>
                                <p>
                                    <strong>
                                        <em class="number J-p-5963064">￥2999.00</em>
                                    </strong>
                                </p>
                                <a href="#" class="mc_div_a2">立即抢购</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="JD_right">
                <div class="hd"> 促销活动</div>
                <div class="bd">
                    <ul>
                        <li> . <a href="#">红米千元全面屏手机上市</a></li>
                        <li> . <a href="#">锤子坚果Pro2火爆预约中</a></li>
                        <li> . <a href="#">大牌新品 疯狂抢购</a></li>
                        <li> . <a href="#">X20 vivo蓝新色上市</a></li>
                        <li> . <a href="#">荣耀畅玩7X新品上市</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!--手机-->
    <div class="JD_ipone">
        <div class="JD_ipone_bar">
            <div class="JD_ipone_one a">
                <a href="#">手机</a>
            </div>
            <i><img src="/static/search/image/right-@1x.png" alt=""></i>
            <div class="JD_ipone_one b">
                <a href="#" class="qqq">手机通讯录 <img src="/static/search/image/down-@1x.png" alt=""></a>
                <div>
                    <a href="#">手机通讯</a>
                    <a href="#">运营商</a>
                    <a href="#">手机配件</a>
                    <a href="#">手机服务</a>
                </div>
            </div>
            <i><img src="/static/search/image/right-@1x.png" alt=""></i>
            <div class="JD_ipone_one c">
                <a href="#" class="qqq">手机 <img src="/static/search/image/down-@1x.png" alt=""></a>
                <div>
                    <a href="#">手机</a>
                    <a href="#">老人机</a>
                    <a href="#">对讲机</a>
                    <a href="#">女性手机</a>
                    <a href="#">超续航手机</a>
                    <a href="#">全面屏手机</a>
                    <a href="#">拍照手机</a>
                    <a href="#">游戏手机</a>
                </div>
            </div>
            <i><img src="/static/search/image/right-@1x.png" alt=""></i>
            <!-- 面包屑导航 -->
            <div class="JD_ipone_one c">
                <a th:href="${nav.link}" th:each="nav:${searchResponseVO.navs}" class="nav_a"
                   style="background: #eee;border:1px solid #ccc;padding-left: 5px;padding-right: 0px;margin-right: 5px">
                    <span class="nav_f" th:text="${nav.navName}"></span>
                    <span class="nav_f nav_f_v" th:text="${nav.navValue}"></span>
                    <span class="nav_f_x">X</span>
                </a>
            </div>
        </div>
    </div>

    <!--商品筛选和排序-->
    <div class="JD_banner w">
        <div class="JD_nav">
            <div class="JD_selector">
                <!--手机商品筛选-->
                <div class="title">
                    <h3><b>手机</b><em>商品筛选</em></h3>
                    <div class="st-ext">共&nbsp;<span>10135</span>个商品 </div>
                </div>
                <div class="JD_nav_logo" th:with="brandId=${param.brandId}">
                    <!--品牌-->
                    <div th:if="${#strings.isEmpty(brandId)}" class="JD_nav_wrap">
                        <div class="sl_key">
                            <span>品牌：</span>
                        </div>
                        <div class="sl_value">
                            <div class="sl_value_logo">
                                <ul>
                                    <li th:each="brand:${searchResponseVO.brands}">
                                        <a th:href="${'javascript:searchProduct(&quot;brandId&quot;,'+brand.brandId+')'}">
                                            <img th:src="${brand.brandImg}" alt="">
                                            <div th:text="${brand.brandName}"></div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="sl_ext">
                            <a href="#">
                                更多
                                <i style='background: url("/static/search/image/search.ele.png")no-repeat 3px 7px'></i>
                                <b style='background: url("/static/search/image/search.ele.png")no-repeat 3px -44px'></b>
                            </a>
                            <a href="#">
                                多选
                                <i>+</i>
                                <span>+</span>
                            </a>
                        </div>
                    </div>
                    <!--分类-->
                    <div class="JD_pre">
                        <div class="sl_key">
                            <span>分类：</span>
                        </div>
                        <div class="sl_value">
                            <ul>
                                <li th:each="catalog:${searchResponseVO.catalogs}">
                                    <a th:href="${'javascript:searchProduct(&quot;catalog3Id&quot, '+catalog.catalogId+')'}"
                                       th:text="${catalog.catalogName}"></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!--SKU属性-->
                    <div class="JD_pre" th:each="attr:${searchResponseVO.attrs}"
                         th:if="${!#lists.contains(searchResponseVO.attrIds, attr.attrId)}">
                        <div class="sl_key">
                            <span th:text="${attr.getAttrName()}"></span>
                        </div>
                        <div class="sl_value">
                            <ul>
                                <li th:each="attrValue:${attr.attrValues}">
                                    <a th:href="${'javascript:searchProduct(&quot;attrs&quot, &quot;'+attr.attrId+'_'+attrValue+'&quot;)'}"
                                       th:text="${attrValue}"></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="JD_show">
                    <a href="#">
                        <span>
                            更多选项（ CPU核数、网络、机身颜色 等）
                        </span>
                    </a>
                </div>
            </div>
            <!--排序-->
            <div class="JD_banner_main">
                <!--商品精选-->
                <div class="JD_con_left">
                    <div class="JD_con_left_bar">
                        <div class="JD_con_one">
                            <div class="mt">
                                <h3>商品精选</h3>
                                <span>广告</span>
                            </div>
                            <div class="mc">
                                <ul>
                                    <li>
                                        <a href="#" title="vivo X9s 全网通 4GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待"><img
                                                src="/static/search/img/59bf3c47n91d65c73.jpg" alt=""></a>
                                        <a href="#" title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                                            <em>华为 HUAWEI nova 2S 全面屏四摄 6GB +64GB 曜石黑 移动联通电信4G手机 双卡双待</em>
                                        </a>
                                        <div class="mc_price">
                                            <strong class="price">
                                                <span class="J-p-5963064">￥2999.00</span>
                                            </strong>
                                            <span class="mc-ico" title="购买本商品送赠品">
                                                <i class="goods-icons">赠品</i>
                                            </span>
                                        </div>
                                        <div class="mc_rev">
                                            已有
                                            <a href="#" class="number">12466</a>
                                            人评价
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#" title="vivo X9s 全网通 4GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待"><img
                                                src="/static/search/img/59bf3c47n91d65c73.jpg" alt=""></a>
                                        <a href="#" title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                                            <em>华为 HUAWEI nova 2S 全面屏四摄 6GB +64GB 曜石黑 移动联通电信4G手机 双卡双待</em>
                                        </a>
                                        <div class="mc_price">
                                            <strong class="price">
                                                <span class="J-p-5963064">￥2999.00</span>
                                            </strong>
                                            <span class="mc-ico" title="购买本商品送赠品">
                                                <i class="goods-icons">赠品</i>
                                            </span>
                                        </div>
                                        <div class="mc_rev">
                                            已有
                                            <a href="#" class="number">12466</a>
                                            人评价
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#" title="vivo X9s 全网通 4GB+64GB 磨砂黑 移动联通电信4G手机 双卡双待"><img
                                                src="/static/search/img/593ba628n8794c6a6.jpg" alt=""></a>
                                        <a href="#" title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                                            <em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
                                        </a>
                                        <div class="mc_price">
                                            <strong class="price">
                                                <span class="J-p-5963064">￥1799.00</span>
                                            </strong>
                                            <span class="mc-ico" title="购买本商品送赠品">
                                                <i class="goods-icons">赠品</i>
                                            </span>
                                        </div>
                                        <div class="mc_rev">
                                            已有
                                            <a href="#" class="number">15600</a>
                                            人评价
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!--综合排序-->
                <div class="JD_con_right">
                    <div class="filter">
                        <!--综合排序-->
                        <div class="filter_top">
                            <div class="filter_top_left" th:with="p=${param.sort},pr=${param.skuPrice}">
                                <a th:class="${(!#strings.isEmpty(p) && #strings.startsWith(p, 'hotScore') && #strings.endsWith(p, 'desc')) ? 'a_sort desc' : 'a_sort'}"
                                   th:attr="style=${(#strings.isEmpty(p) || #strings.startsWith(p, 'hotScore')) ? 'color:#fff;border-color:#e4393c;background:#e4393c;' : 'color:#333;border-color:#ccc;background:#fff;'}"
                                   sort="hotScore" href="#">综合排序[[${(!#strings.isEmpty(p) && #strings.startsWith(p, 'hotScore') && #strings.endsWith(p, 'desc'))?'↓':'↑'}]]</a>
                                <a th:class="${(!#strings.isEmpty(p) && #strings.startsWith(p, 'saleCount') && #strings.endsWith(p, 'desc')) ? 'a_sort desc' : 'a_sort'}"
                                   th:attr="style=${(!#strings.isEmpty(p) && #strings.startsWith(p, 'saleCount')) ? 'color:#fff;border-color:#e4393c;background:#e4393c;' : 'color:#333;border-color:#ccc;background:#fff;'}"
                                   sort="saleCount" href="#">销量[[${(!#strings.isEmpty(p) && #strings.startsWith(p, 'saleCount') && #strings.endsWith(p, 'desc'))?'↓':'↑'}]]</a>
                                <a th:class="${(!#strings.isEmpty(p) && #strings.startsWith(p, 'price') && #strings.endsWith(p, 'desc')) ? 'a_sort desc' : 'a_sort'}"
                                   th:attr="style=${(!#strings.isEmpty(p) && #strings.startsWith(p, 'price')) ? 'color:#fff;border-color:#e4393c;background:#e4393c;' : 'color:#333;border-color:#ccc;background:#fff;'}"
                                   sort="price" href="#">价格[[${(!#strings.isEmpty(p) && #strings.startsWith(p, 'price') && #strings.endsWith(p, 'desc'))?'↓':'↑'}]]</a>
                                <input id="minPrice" type="number" style="border:1px solid #ccc;width:80px;height: 23px;margin-left: 10px" th:value="${#strings.isEmpty(pr)?'':#strings.substringBefore(pr,'_')}"> -
                                <input id="maxPrice" type="number" style="border:1px solid #ccc;width:80px;height: 23px" th:value="${#strings.isEmpty(pr)?'':#strings.substringAfter(pr,'_')}">
                                <button id="skuPriceSearchBtn" style="border:1px solid #ccc;height: 23px;padding: 0px 5px">确定</button>
                            </div>
                            <div class="filter_top_right">
                                    <span class="fp-text">
                                        <b>[[${searchResponseVO.pageNum}]]</b><em>/</em><i>[[${searchResponseVO.totalPage}]]</i>
                                    </span>
                                <a href="#" class="prev"> < </a>
                                <a href="#" class="next"> > </a>
                            </div>
                        </div>
                        <!--收货地址-->
                        <div class="filter_bottom">
                            <div class="filter_bottom_left">
                                <div class="fs-cell">收货地</div>
                                <div class="dizhi">
                                    <div class="dizhi_show">
                                        <em>北京朝阳区三环以内</em>
                                        <b></b>
                                    </div>
                                </div>
                                <div class="dizhi_con">
                                    <ul id="tab">
                                        <li id="tab1" value="1">北京 <img src="/static/search/image/down-@1x.png" alt=""></li>
                                        <li id="tab2" value="2">朝阳 <img src="/static/search/image/down-@1x.png" alt=""></li>
                                        <li id="tab3" value="3">三环以内 <img src="/static/search/image/down-@1x.png" alt=""></li>
                                    </ul>
                                    <div id="container">
                                        <div id="content1" style="z-index: 1;">
                                            <a href="#">北京</a>
                                            <a href="#">上海</a>
                                            <a href="#">天津</a>
                                            <a href="#">重庆</a>
                                            <a href="#">河北</a>
                                            <a href="#">山西</a>
                                            <a href="#">河南</a>
                                            <a href="#">辽宁</a>
                                            <a href="#">吉林</a>
                                            <a href="#">黑龙江</a>
                                            <a href="#">内蒙古</a>
                                            <a href="#">江苏</a>
                                            <a href="#">山东</a>
                                            <a href="#">安徽</a>
                                            <a href="#">浙江</a>
                                            <a href="#">福建</a>
                                            <a href="#">湖北</a>
                                            <a href="#">湖南</a>
                                            <a href="#">广东</a>
                                            <a href="#">广西</a>
                                            <a href="#">江西</a>
                                            <a href="#">四川</a>
                                            <a href="#">海南</a>
                                            <a href="#">贵州</a>
                                            <a href="#">云南</a>
                                            <a href="#">西藏</a>
                                            <a href="#">陕西</a>
                                            <a href="#">甘肃</a>
                                            <a href="#">青海</a>
                                            <a href="#">宁夏</a>
                                            <a href="#">新疆</a>
                                            <a href="#">港澳</a>
                                            <a href="#">台湾</a>
                                            <a href="#">钓鱼岛</a>
                                            <a href="#">海外</a>
                                        </div>
                                        <div id="content2">
                                            <a href="#">朝阳区</a>
                                            <a href="#">海淀区</a>
                                            <a href="#">西城区</a>
                                            <a href="#">东城区</a>
                                            <a href="#">大兴区</a>
                                            <a href="#">丰台区</a>
                                            <a href="#">昌平区</a>
                                            <a href="#">顺义区</a>
                                        </div>
                                        <div id="content3">
                                            <a href="#">三环以内</a>
                                            <a href="#">管庄</a>
                                            <a href="#">北苑</a>
                                            <a href="#">定福庄</a>
                                            <a href="#">三环到四环之间</a>
                                            <a href="#">四环到五环之间</a>
                                            <a href="#">五环到六环之间</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="filter_bottom_right">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <input type="checkbox">
                                            优品配送
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <input type="checkbox">
                                            京尊达 </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <input type="checkbox">货到付款
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" th:with="check=${param.hasStock}">
                                            <input id="showHasStock" type="checkbox" th:checked="${#strings.equals(check,'1')}">
                                            仅显示有货
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <input type="checkbox">
                                            可配送全球
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!--排序内容-->
                        <div class="rig_tab">
                            <div th:each="product:${searchResponseVO.getProducts()}">
                                <div class="ico">
                                    <i class="iconfont icon-weiguanzhu"></i>
                                    <a href="#">关注</a>
                                </div>
                                <p class="da">
                                    <a th:href="|http://item.yomall.com/${product.skuId}.html|">
                                        <img th:src="${product.skuImg}" class="dim">
                                    </a>
                                </p>
                                <ul class="tab_im">
                                    <li>
                                        <a href="#">
                                            <img th:src="${product.skuImg}">
                                        </a>
                                    </li>
                                </ul>
                                <p class="tab_R">
                                    <span th:text="'¥'+${product.skuPrice}"></span>
                                </p>
                                <p class="tab_JE">
                                    <a href="#" th:utext="${product.skuTitle}"></a>
                                </p>
                                <p class="tab_PI">
                                    已有<span>11万+</span>热门评价
                                    <a href="#">二手有售</a>
                                </p>
                                <p class="tab_CP">
                                    <a href="#" title="优品Apple产品专营店">优品Apple产品...</a>
                                    <a href='#' title="联系供应商进行咨询">
                                        <img src="/static/search/img/xcxc.png">
                                    </a>
                                </p>
                                <div class="tab_FO">
                                    <div class="FO_one">
                                        <p>自营
                                            <span>优品自营,品质保证</span>
                                        </p>
                                        <p>满赠
                                            <span>该商品参加满赠活动</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--分页-->
                        <div class="filter_page">
                            <div class="page_wrap">
                                <span class="page_span1">
                                    <a class="a_page" th:if="${searchResponseVO.pageNum > 1}"
                                       th:attr="pageNo=${searchResponseVO.pageNum - 1}"
                                       style="background: #eee;color: #333">
                                    < 上一页
                                    </a>
                                    <a class="a_page" th:each="pageNav:${searchResponseVO.pageNavs}"
                                       th:attr="pageNo=${pageNav}, style=${pageNav == searchResponseVO.pageNum
                                       ? 'border: 0;color:#ee2222;background: #fff' : ''}">
                                        [[${pageNav}]]
                                    </a>
                                    <a class="a_page" th:if="${searchResponseVO.pageNum < searchResponseVO.totalPage}"
                                       th:attr="pageNo=${searchResponseVO.pageNum + 1}">
                                        下一页 >
                                    </a>
                                </span>
                                <span class="page_span2">
                                    <em>
                                        &nbsp;&nbsp;&nbsp;&nbsp;
                                        共<b>[[${searchResponseVO.totalPage}]]</b>页
                                        &nbsp;&nbsp;&nbsp;&nbsp;到第
                                    </em>
                                    <input type="text" th:value="${searchResponseVO.pageNum}">
                                    <em>页</em>
                                    <a class="page_submit">确定</a>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--商品精选-->
    <div class="JD_jx">
        <div class="JD_jx_title">
            <div class="mt">
                <strong class="mt-title">商品精选</strong>
                <img src="/static/search/image/u-ad.gif" alt="">
            </div>
            <div class="mc">
                <ul>
                    <li>
                        <div class="mc_img">
                            <a href="#" title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                                <img src="/static/search/img/5a25ffc7N98b35d49.jpg" alt="">
                            </a>
                        </div>
                        <div class="mc_name">
                            <a href="#" title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                                <em>【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待</em>
                            </a>
                        </div>
                        <div class="mc_price">
                            <strong>
                                <span>￥1999.00</span>
                            </strong>
                            <span class="mc_ico" title="购买本商品送赠品">赠品</span>
                        </div>
                        <div class="mc_rev">
                            <a href="#">15930</a>
                            <span>人好评</span>
                        </div>
                    </li>
                    <li>
                        <div class="mc_img">
                            <a href="#" title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                                <img src="/static/search/img/5a25ffc7N98b35d49.jpg" alt="">
                            </a>
                        </div>
                        <div class="mc_name">
                            <a href="#" title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                                <em>【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待</em>
                            </a>
                        </div>
                        <div class="mc_price">
                            <strong>
                                <span>￥1999.00</span>
                            </strong>
                            <span class="mc_ico" title="购买本商品送赠品">赠品</span>
                        </div>
                        <div class="mc_rev">
                            <a href="#">15930</a>
                            <span>人好评</span>
                        </div>
                    </li>
                    <li>
                        <div class="mc_img">
                            <a href="#" title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                                <img src="/static/search/img/5a25ffc7N98b35d49.jpg" alt="">
                            </a>
                        </div>
                        <div class="mc_name">
                            <a href="#" title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                                <em>【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待</em>
                            </a>
                        </div>
                        <div class="mc_price">
                            <strong>
                                <span>￥1999.00</span>
                            </strong>
                            <span class="mc_ico" title="购买本商品送赠品">赠品</span>
                        </div>
                        <div class="mc_rev">
                            <a href="#">15930</a>
                            <span>人好评</span>
                        </div>
                    </li>
                    <li>
                        <div class="mc_img">
                            <a href="#" title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                                <img src="/static/search/img/5a25ffc7N98b35d49.jpg" alt="">
                            </a>
                        </div>
                        <div class="mc_name">
                            <a href="#" title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                                <em>【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待</em>
                            </a>
                        </div>
                        <div class="mc_price">
                            <strong>
                                <span>￥1999.00</span>
                            </strong>
                            <span class="mc_ico" title="购买本商品送赠品">赠品</span>
                        </div>
                        <div class="mc_rev">
                            <a href="#">15930</a>
                            <span>人好评</span>
                        </div>
                    </li>
                    <li>
                        <div class="mc_img">
                            <a href="#" title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                                <img src="/static/search/img/5a25ffc7N98b35d49.jpg" alt="">
                            </a>
                        </div>
                        <div class="mc_name">
                            <a href="#" title="【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待">
                                <em>【预约版】华为 HUAWEI 畅享7S 全面屏双摄 4GB +64GB 黑色 移动联通电信4G手机 双卡双待</em>
                            </a>
                        </div>
                        <div class="mc_price">
                            <strong>
                                <span>￥1999.00</span>
                            </strong>
                            <span class="mc_ico" title="购买本商品送赠品">赠品</span>
                        </div>
                        <div class="mc_rev">
                            <a href="#">15930</a>
                            <span>人好评</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!--猜你喜欢-->
    <div class="JD_cnxh">
        <div class="JD_jx_title">
            <div class="mt">
                <strong class="mt-title">猜你喜欢</strong>
                <a href="#">
                    <img src="/static/search/image/update.png" alt="">
                    换一批
                </a>
            </div>
            <div class="mc">
                <ul>
                    <li>
                        <div class="mc_img">
                            <a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                                <img src="/static/search/img/59bf3c47n91d65c73.jpg" alt="">
                            </a>
                        </div>
                        <div class="mc_name">
                            <a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                                <em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
                            </a>
                        </div>
                        <div class="mc_rev">
                            <a href="#">已有80万+人评价</a>
                        </div>
                        <div class="mc_price">
                            <strong>
                                <span>￥1999.00</span>
                            </strong>
                        </div>

                    </li>
                    <li>
                        <div class="mc_img">
                            <a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                                <img src="/static/search/img/5a28b5c6Ndec5088f.jpg" alt="">
                            </a>
                        </div>
                        <div class="mc_name">
                            <a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                                <em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
                            </a>
                        </div>
                        <div class="mc_rev">
                            <a href="#">已有80万+人评价</a>
                        </div>
                        <div class="mc_price">
                            <strong>
                                <span>￥1999.00</span>
                            </strong>
                        </div>

                    </li>
                    <li>
                        <div class="mc_img">
                            <a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                                <img src="/static/search/img/593e4de0n5ff878a4.jpg" alt="">
                            </a>
                        </div>
                        <div class="mc_name">
                            <a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                                <em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
                            </a>
                        </div>
                        <div class="mc_rev">
                            <a href="#">已有80万+人评价</a>
                        </div>
                        <div class="mc_price">
                            <strong>
                                <span>￥1999.00</span>
                            </strong>
                        </div>

                    </li>
                    <li>
                        <div class="mc_img">
                            <a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                                <img src="/static/search/img/593e4de0n5ff878a4.jpg" alt="">
                            </a>
                        </div>
                        <div class="mc_name">
                            <a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                                <em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
                            </a>
                        </div>
                        <div class="mc_rev">
                            <a href="#">已有80万+人评价</a>
                        </div>
                        <div class="mc_price">
                            <strong>
                                <span>￥1999.00</span>
                            </strong>
                        </div>
                    </li>
                    <li>
                        <div class="mc_img">
                            <a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                                <img src="/static/search/img/59c493a7N3f9b9c85 (1).jpg" alt=""></a>
                        </div>
                        <div class="mc_name">
                            <a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                                <em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
                            </a>
                        </div>
                        <div class="mc_rev">
                            <a href="#">已有80万+人评价</a>
                        </div>
                        <div class="mc_price">
                            <strong>
                                <span>￥1999.00</span>
                            </strong>
                        </div>
                    </li>
                    <li>
                        <div class="mc_img">
                            <a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                                <img src="/static/search/img/59c493a7N3f9b9c85 (1).jpg" alt=""></a>
                        </div>
                        <div class="mc_name">
                            <a href="#" title="诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机">
                                <em>诺基亚 7 (Nokia 7) 4GB+64GB 黑色 全网通 双卡双待 移动联通电信4G手机</em>
                            </a>
                        </div>
                        <div class="mc_rev">
                            <a href="#">已有80万+人评价</a>
                        </div>
                        <div class="mc_price">
                            <strong>
                                <span>￥1999.00</span>
                            </strong>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div style="width: 1210px; margin: 0 auto; margin-bottom: 10px">
        <img src="/static/search/img/5a33a2e0N9a04b4af.jpg" alt="">
    </div>

    <!--底部-->
    <footer class="footer">
        <div class="footer_top">
            <ul>
                <li>
                    <span></span>
                    <h3>品类齐全，轻松购物</h3>
                </li>
                <li>
                    <span></span>
                    <h3>多仓直发，极速配发</h3>
                </li>
                <li>
                    <span></span>
                    <h3>正品行货，精致服务</h3>
                </li>
                <li>
                    <span></span>
                    <h3>天天低价，畅选无忧</h3>
                </li>
            </ul>
        </div>
        <div class="footer_center">
            <ol>
                <li>购物指南</li>
                <li><a href="#" style="color: rgb(114, 114, 114);">购物流程</a>
                </li>
                <li><a href="#" style="color: rgb(114, 114, 114);">会员介绍</a>
                </li>
                <li><a href="#">生活旅行</a>
                </li>
                <li><a href="#" style="color: rgb(114, 114, 114);">常见问题</a>
                </li>
                <li><a href="#">大家电</a>
                </li>
                <li><a href="#" style="color: rgb(114, 114, 114);">联系客服</a>
                </li>
            </ol>
            <ol>
                <li>配送方式</li>
                <li><a href="#" style="color: rgb(114, 114, 114);">上门自提</a>
                </li>
                <li><a href="#" style="color: rgb(114, 114, 114);">211限时达</a>
                </li>
                <li><a href="#" style="color: rgb(114, 114, 114);">配送服务查询</a>
                </li>
                <li><a href="#" style="color: rgb(114, 114, 114);">配送费收取标准</a>
                </li>
                <li><a href="#" style="color: rgb(114, 114, 114);">海外配送</a>
                </li>
            </ol>
            <ol>
                <li>支付方式</li>
                <li><a href="#" style="color: rgb(114, 114, 114);">货到付款</a>
                </li>
                <li><a href="#" style="color: rgb(114, 114, 114);">在线支付</a>
                </li>
                <li><a href="#" style="color: rgb(114, 114, 114);">分期付款</a>
                </li>
                <li><a href="#" style="color: rgb(114, 114, 114);">邮局汇款</a>
                </li>
                <li><a href="#" style="color: rgb(114, 114, 114);">公司转账</a>

                </li>
            </ol>
            <ol>
                <li>售后服务</li>
                <li><a href="#" style="color: rgb(114, 114, 114);">售后政策</a>
                </li>
                <li><a href="#" style="color: rgb(114, 114, 114);">价格保护</a>
                </li>
                <li><a href="#" style="color: rgb(114, 114, 114);">退款说明</a>
                </li>
                <li><a href="#" style="color: rgb(114, 114, 114);">返修/退换货</a>
                </li>
                <li><a href="#">取消订单</a>
                </li>
            </ol>
            <ol>
                <li>特色服务</li>
                <li><a href="#" style="color: rgb(114, 114, 114);">夺宝岛</a>
                </li>
                <li><a href="#">DIY装机</a>
                </li>
                <li><a href="#" style="color: rgb(114, 114, 114);">延保服务</a>
                </li>
                <li><a href="#" style="color: rgb(114, 114, 114);">优品E卡</a>
                </li>
                <li><a href="#" style="color: rgb(114, 114, 114);">优品通信</a>
                </li>
            </ol>
            <ol>
                <li>优品自营覆盖区域</li>
                <li>
                    优品已向全国2661个区县提供自<br> 营配送服务，支持货到付款、
                    <br> POS机刷卡和售后上门服务。
                </li>
                <li><a href="#" style="color: rgb(114, 114, 114);">查看详情&gt;</a>
                </li>
            </ol>
        </div>
        <div class="footer_foot">
            <p class="footer_p p1">
                <a href="#">关于我们</a>
                <span></span>
                <a href="#" style="color: rgb(114, 114, 114);">联系我们</a>
                <span></span>
                <a href="#">联系客服</a>
                <span></span>
                <a href="#" style="color: rgb(114, 114, 114);">合作招商</a>
                <span></span>
                <a href="#" style="color: rgb(114, 114, 114);">商家帮助</a>
                <span></span>
                <a href="#" style="color: rgb(114, 114, 114);">营销中心</a>
                <span></span>
                <a href="#" style="color: rgb(114, 114, 114);">手机优品</a>
                <span></span>
                <a href="#" style="color: rgb(114, 114, 114);">友情链接</a>
                <span></span>
                <a href="#" style="color: rgb(114, 114, 114);">销售联盟</a>
                <span></span>
                <a href="#" style="color: rgb(114, 114, 114);">优品社区</a>
                <span></span>
                <a href="#" style="color: rgb(114, 114, 114);">风险监测</a>
                <span></span>
                <a href="#">隐私政策</a>
                <span></span>
                <a href="#">优品公益</a>
                <span></span>
                <a href="#" style="color: rgb(114, 114, 114);">English Site</a>
                <span></span>
                <a href="#">Media &amp; IR</a>
            </p>
            <p class="footer_p">
                <a href="#">京公网安备 11000002000088号</a>
                <span></span>
                <a href="#">京ICP证070359号</a>
                <span></span>
                <a href="#">互联网药品信息服务资格证编号(京)-经营性-2014-0008</a>
                <span></span>
                <a href="#">新出发京零 字第大120007号</a>
            </p>
            <p class="footer_p">
                <a href="#">互联网出版许可证编号新出网证(京)字150号</a>
                <span></span>
                <a href="#">出版物经营许可证</a>
                <span></span>
                <a href="#">网络文化经营许可证京网文[2014]2148-348号</a>
                <span></span>
                <a href="#">违法和不良信息举报电话：4006561155</a>
            </p>
            <p class="footer_p">
                <a href="#">Copyright © 2004 - 2017 优品JD.com 版权所有</a>
                <span></span>
                <a href="#">消费者维权热线：4006067733</a>
                <a href="#">经营证照</a>
            </p>
            <p class="footer_p">
                <a href="#">优品旗下网站:</a>
                <a href="#">优品支付</a>
                <span></span>
                <a href="#">优品云</a>
            </p>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </footer>

    <!--右侧侧边栏-->
    <div class="header_bar">
        <div class="header_bar_box">
            <ul>
                <li>
                    <a href="#"><img src="/static/search/img/wo.png" /></a>
                    <div class="div">
                        <a href="#">优品会员</a>
                    </div>
                </li>
                <li>
                    <a href="#"><img src="/static/search/img/gouwuche.png" /></a>
                    <div class="div">
                        <a href="#">购物车</a>
                    </div>
                </li>
                <li>
                    <a href="#"><img src="/static/search/img/taoxin.png" /></a>
                    <div class="div">
                        <a href="#">我的关注</a>
                    </div>
                </li>

                <li>
                    <a href="#"><img src="/static/search/img/shi.png" /></a>
                    <div class="div">
                        <a href="#">我的足迹</a>
                    </div>
                </li>
                <li>
                    <a href="#"><img src="/static/search/img/xinxi.png" /></a>
                    <div class="div">
                        <a href="#">我的消息</a>
                    </div>
                </li>
                <li>
                    <a href="#"><img src="/static/search/img/qianbao.png" /></a>
                    <div class="div">
                        <a href="#">资讯JIMI</a>
                    </div>
                </li>
            </ul>
            <ul>
                <li>
                    <a href="#"><img src="/static/search/img/fa3f24a70d38bd439261cb7439e517a5.png" /></a>
                    <div class="div">
                        <a href="#">顶部</a>
                    </div>
                </li>
                <li>
                    <a href="#"><img src="/static/search/img/xinxi.png" /></a>
                    <div class="div">
                        <a href="#">反馈</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <script>
        // 商品筛选
        function searchProduct(name, value){
            location.href = replaceParamVal(location.href, name, value, true)
        }

        // 根据关键字
        function searchByKeyword() {
            searchProduct('keyword', $('#keyword_input').val())
        }

        // 分页跳转处理
        $('.a_page').click(function (){
            let pageNo = $(this).attr('pageNo');
            if (location.href.lastIndexOf('pageNum') != -1){
                // 替换pageNum的值
                location.href = replaceParamVal(location.href, 'pageNum', pageNo)
            } else {
                location.href += '&pageNum=' + pageNo
            }
            return false
        })

        /**
         * url替换
         * @param url
         * @param paramName 替换的参数
         * @param replaceVal 替换的参数值
         * @param forceAdd 强制追加参数
         * @returns {string}
         */
        function replaceParamVal(url, paramName, replaceVal, forceAdd) {
            let oUrl = url.toString()
            if (oUrl.indexOf(paramName) != -1) {
                if (forceAdd) {
                    let nUrl = ''
                    if (oUrl.lastIndexOf('?') != -1) {
                        nUrl = oUrl + '&' + paramName + '=' + replaceVal
                    } else {
                        nUrl = oUrl + '?' + paramName + '=' + replaceVal
                    }
                    return nUrl
                } else {
                    let re = eval('/('+paramName+'=)([^&]*)/gi')
                    let nUrl = oUrl.replace(re, paramName + '=' + replaceVal)
                    return nUrl
                }
            } else {
                let nUrl = ''
                if (oUrl.lastIndexOf('?') != -1) {
                    nUrl = oUrl + '&' + paramName + '=' + replaceVal
                } else {
                    nUrl = oUrl + '?' + paramName + '=' + replaceVal
                }
                return nUrl
            }
        }

        // 商品排序
        $('.a_sort').click(function () {
            $(this).toggleClass('desc')
            let sort = $(this).attr('sort')
            sort = $(this).hasClass('desc') ? sort + '_desc' : sort + '_asc'
            location.href = replaceParamVal(location.href, 'sort', sort)
            return false
        })

        // 商品价格区间过滤
        $('#skuPriceSearchBtn').click(function () {
            let minPrice = $('#minPrice').val()
            let maxPrice = $('#maxPrice').val()
            let query = ''
            if (minPrice !== '' || maxPrice !== '') {
                query = minPrice + '_' + maxPrice
            }
            location.href = replaceParamVal(location.href, 'skuPrice', query)
        })

        // 仅显示有货
        $('#showHasStock').change(function () {
            if ($(this).prop('checked')) {
                location.href = replaceParamVal(location.href, 'hasStock', 1)
            } else {
                let re = eval('/(&hasStock=)([^&]*)/gi');
                location.href = location.href.toString().replace(re, '')
            }
        })

        // 面包屑导航样式控制
        let $navs = $('.nav_a')
        for (let i = 0; i < $navs.length; i++) {
            (function (i){
                $($navs[i]).hover(function (){
                    $($navs[i]).css({'border':'1px solid red','background':'#fff'})
                    $('.nav_f_x:eq('+i+')').css({'background':'red','color':'#fff'})
                }, function (){
                    $($navs[i]).css({'border':'1px solid #ccc','background':'#eee'})
                    $('.nav_f_x:eq('+i+')').css({'background':'#eee','color':'red'})
                })
            })(i)
        }

        $(".sl_ext a:nth-child(1)").hover(function () {
            $(this).children("b").stop(true).animate({ top: "3px" }, 50);
            $(this).children("i").stop(true).animate({ top: "-23px" }, 50)
        }, function () {
            $(this).children("b").stop(true).animate({ top: "24px" }, 50);
            $(this).children("i").stop(true).animate({ top: "3px" }, 50)
        });
        $(".sl_ext a:nth-child(2)").hover(function () {
            $(this).children("span").stop(true).animate({ top: "-1px" }, 100);
            $(this).children("i").stop(true).animate({ top: "-14px" }, 100).css({ display: "none" })
        }, function () {
            $(this).children("span").stop(true).animate({ top: "14px" }, 100);
            $(this).children("i").stop(true).animate({ top: "-1px" }, 100).css({ display: "block" })
        });
        $('.tab_im img').hover(function () {
            var a = $(this).prop('src');
            var index = $(this).parents('li').index();
            $(this).parents('li').css('border', '2px solid red').siblings('li').css('border', '1px solid #ccc');
            $(this).parents('ul').prev().find('img').prop('src', a);
            $(this).parents('ul').siblings('.tab_JE').find('a').eq(list).css('display', 'block').siblings('a').css('display', 'none');
            $(this).parents('ul').siblings('.tab_R').find('span').eq(list).css('display', 'block').siblings('span').css('display', 'none')
        });

        $(".JD_ipone_one").hover(function () {
            $(this).children("div").css({ display: "block" })
        }, function () {
            $(this).children("div").css({ display: "none" })
        });

        $("#tab>li").click(function () {
            var i = $(this).index();
            $("#container>div").hide().eq(i).show()
        });
        $(".dizhi_show").hover(function () {
            $(".dizhi_con").css({ display: "block"})
        }, function () {
            $(".dizhi_con").css({ display: "none" })
        });
        $(".dizhi_con").hover(function () {
            $(this).css({ display: "block" })
        }, function () {
            $(this).css({ display: "none" })
        });
        //显示隐藏
        var $li = $(".JD_nav_logo>div:gt(3)").hide();
        $('.JD_show span').click(function () {
            if ($li.is(':hidden')) {
                $li.show();
                $(this).css({ width: "86px" }).text('收起 ^');
            } else {
                $li.hide();
                $('.JD_show span').css({ width: "291px" }).text('更多选项（ CPU核数、网络、机身颜色 等）');
            }
            return false;
        });

        $(".rig_tab>div").hover(function () {
            var i = $(this).index();
            $(this).find('.ico').css({ display: 'block' }).stop(true).animate({ top: "190px" }, 300)
        }, function () {
            var i = $(this).index();
            $(this).find('.ico').css({ display: 'none' }).stop(true).animate({ top: "230px" })
        });

        $('.header_main_left>ul>li').hover(function () {
            $(this).css({
                background: "#f0f0f0"
            }).find('.header_main_left_main').stop(true).fadeIn(300)
        }, function () {
            $(this).css({
                background: "#fff"
            }).find(".header_main_left_a").css({
                color: "#000"
            });
            $(this).find('.header_main_left_main').stop(true).fadeOut(100)
        });
        $(".header_sj a").hover(function () {
            $(this).css({
                background: "#444"
            })
        }, function () {
            $(this).css({
                background: "#6e6568"
            })
        });


        $(".nav_li1 a").hover(function () {
            $(".header_main_left").stop(true).fadeIn()
        }, function () {
            $(".header_main_left").stop(true).fadeOut()
        });
        $(".header_main_left").hover(function () {
            $(this).stop(true).fadeIn()
        }, function () {
            $(this).stop(true).fadeOut()
        });


        //右侧侧边栏
        $(".header_bar_box ul li").hover(function () {
            $(this).css({
                background: "#7A6E6E"
            }).children(".div").css({
                display: "block"
            }).stop(true).animate({
                left: "-60px"
            }, 300)
        }, function () {
            $(this).css({
                background: "#7A6E6E"
            }).children(".div").css({
                display: "none"
            }).stop(true).animate({
                left: "0"
            }, 300)
        });

        //底部
        $(".footer_foot .p1 a").hover(function () {
            $(this).css("color", "#D70B1C")
        }, function () {
            $(this).css("color", "#727272")
        });

        $(".footer .footer_center ol li a").hover(function () {
            $(this).css("color", "#D70B1C")
        }, function () {
            $(this).css("color", "#727272")
        })
    </script>
</body>

</html>